<template>
  <div class="q-head">
    <div class="q-head-white">
      <Logo></Logo>
      <n-space justify="end" align="center">
        <create-new-q></create-new-q>
        <n-button
          @click="goToQList"
          color="#3c87c5"
          text-color="#fff"
          round
          style="width: 7rem"
        >
          <template #icon>
            <n-icon>
              <list />
            </n-icon>
          </template>
          我的列表
        </n-button>
        <LoginState></LoginState>
      </n-space>
    </div>
  </div>
</template>

<script setup lang="ts">
import CreateNewQ from '@components/CreateNewQ.vue';
import Logo from '@components/Logo.vue';
import { Add, List } from '@vicons/ionicons5';
import LoginState from '@components/LoginState.vue';
import { useRouter } from 'vue-router';

// 菜单点击
const handleUpdateMenu = () => {};
const router = useRouter();
const goToQList = () => {
  router.push('/q/list');
};
</script>

<style scoped lang="scss">
.q-head {
  &-white {
    background-color: rgba(212, 212, 212, 0.3);
    padding: 0 0.5vw;
  }
  background: url('@images/login-bg2.jpg') no-repeat;
  background-position: 45% 10%; /*这个是按从左往右，从上往下的百分比位置进行调整*/
  height: 13vh;
  line-height: 13vh;
  .logo {
    line-height: 10vh;
    float: left;
    margin-top: 2vh;
    margin-left: 3vw;
  }
  .title {
    float: left;
    margin-left: 0.8vw;
    font-size: 2.5vw;
    font-weight: 600;
  }
}
</style>
